<template>
	<div class="container">
		<div class="card-container">
		<!-- Table -->
			<el-card v-for="detail in teachClassList" :key="detail.teacher" class="cards" shadow="hover">
				<el-descriptions :column="2" :border="1" direction="vertical">
					<el-descriptions-item label="课程名">{{ detail.course.name }}</el-descriptions-item>
					<el-descriptions-item label="上课学期">{{ detail.semester }}</el-descriptions-item>
					<el-descriptions-item label="周数">{{ detail.start_week }}-{{ detail.end_week }}</el-descriptions-item>
					<el-descriptions-item label="已选/容量">{{ detail.selected }}/{{ detail.capacity}}</el-descriptions-item>
				</el-descriptions>
				<div class="button-container">
					<el-button type="primary" class="button" @click="handleStudentCourse(detail.tc_id)" size="mini">班级管理</el-button>
					<el-button type="primary" class="button" @click="handleSession(detail.tc_id)" size="mini">时间表</el-button>
					
				</div>
				
			</el-card>
			
			
		</div>
		<el-dialog v-model="studentCourseVisible" title="班级管理" >
			<TableCustom :columns="scColumns" :tableData="studentCourseList" :total="studentCourseList.length">
				<template #grade="{rows,index}">
					<el-input v-model="rows.grade" size="mini" style="width: 100px" placeholder="请输入成绩" />
				</template>
				<template #scopt="{rows,index}">
					<el-button type="primary" @click="updateGrade(rows)" size="mini">更新成绩</el-button>
					<el-button type="danger" @click="deleteStudent(rows)" size="mini">取消课程</el-button>
				</template>
			</TableCustom>
		</el-dialog>
		<Sessions :visible="sessionVisible" :sessionList="sessionList" :handle-close="()=>{sessionVisible=false}" :tc_id="sessionTcId"/>
		<!-- Pagination -->
		<div class="pagination-container">
			<el-pagination background layout="total,prev, pager, next" @current-change="changePage" :total="page.total"
				:index="page.index" :page-size="page.size" />
		</div>
	</div>
</template>




<script lang="ts" setup>

import { ref, reactive } from 'vue';
import { ElMessage, } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { fetchTeachClassPage,fetchSessionByTcId,fetchStudentCourse,deleteStudentCourse,updateStudentCourse } from '@/api/index';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { TableItem } from '@/types/table';
import { FormOption, FormOptionList } from '@/types/form-option';

const query = reactive({
	name: '',
});
const page = reactive({
	index: 1,
	size: 12,
	total: 200,
})

const sessionList = ref([]);
const sessionVisible = ref(false);
const sessionTcId = ref(0);
const handleSession = async (tc_id) => {
	let res = await fetchSessionByTcId(tc_id)
	sessionVisible.value = true;
	sessionList.value = res.data;
	sessionTcId.value = tc_id;
};

// 基本信息
const studentCourseInfo = [
	{ prop: "student.name", label: '姓名' },
	{ prop: "student.sid", label: '学号' },
	{ prop: "grade",label:'成绩'},
]
let scColumns = ref([
	{ type: 'index', label: '序号', width: 55, align: 'center' },
	...studentCourseInfo,
	{ prop: 'scopt', label: '操作', width: 250 }
])
const studentCourseList = ref([]);
const studentCourseVisible = ref(false);
const handleStudentCourse = async (tc_id) => {
	let res = await fetchStudentCourse({index:1,size:100000,tc_id:tc_id})
	studentCourseVisible.value = true;
	studentCourseList.value = res.data.pageList;
};

const loading = ref(true);

const teachClassList=ref([]);
const changePage = async (val: number) => {
	loading.value = true;
	const res = await fetchTeachClassPage({ index: val, size: page.size })
	teachClassList.value = res.data.pageList;
	page.total = res.data.pageNumber;
	page.index = val;
	loading.value = false;
};

const getData = async () => {
	changePage(page.index)
};
getData();


const updateGrade=async (rows)=>{
	updateStudentCourse(rows).then((data)=>{
		ElMessage.success(data.data);
	}).catch((err)=>{
		ElMessage.error(err.response.data);
	})
	console.log(rows)
}
const deleteStudent = async (row) => {
console.log(row)
	deleteStudentCourse({tc_id:row.teachClass.tc_id,sid:row.student.sid}).then((data)=>{
	ElMessage.success(data.data);
	handleStudentCourse(row.teachClass.tc_id);
}).catch((err)=>{
	ElMessage.error(err.response.data);
})
}

</script>

<style scoped>
.pagination-container {
	margin-top: 20px;
	/* Adjust as needed */
}
.container{
	display: block;

}

.card-container {
	display: flex;
	flex-wrap: wrap; /* 自动换行 */
	justify-content: flex-start; /* 对齐方式 */
}

.cards {
	margin: 8px;
	flex-basis: calc(25% - 16px); /* 调整为响应式宽度 */
	max-width: calc(25% - 16px); /* 确保每个卡片宽度占一行四分之一 */
	box-sizing: border-box; /* 确保宽度包含边框和内边距 */
}


.cards p {
	padding-left: 20px;
}

.button-container {
	display: flex;
}

.cards  .button {
	margin-top: 8px;
	/*margin horizontal center*/
	flex-grow: 1;
}

</style>